<template>
  <view>
    <view class="p-charge-details">
      <view class="discount-info">
        <template v-if="discountAmountSum">
          <view class="discount">
            <view class="icon">
              <x-image src="/assets/images/icon-reduce.png" />
            </view>
            <text>共减¥{{discountAmountSum}}</text>
          </view>
          <view v-if="directReductionAmount" class="tag">直降-{{ directReductionAmount }}元</view>
          <view v-if="discountInfo" class="tag">{{ discountInfo.name }}-{{ discountInfo.value }}元</view>
        </template>
      </view>
      <view class="btn-details" @click="handleShowDetails">
        <text>明细</text>
        <x-icon :name="iconName" color="#E96431" size="30" />
      </view>
    </view>
  </view>
</template>

<script>
import XIcon from '@/components/x-icon';
import XImage from '@/components/x-image';

export default {
  name: 'PChargeDetails',
  components: {
    XIcon,
    XImage
  },
  props: {
    directReductionAmount: {
      type: Number,
      default: 0
    },
    discountAmountSum: {
      type: Number,
      default: 0
    },
    discountAmount: {
      type: Number,
      default: 0
    },
    superSubsidyAmount: {
      type: Number,
      default: 0
    },
    couponAmount: {
      type: Number,
      default: 0
    },
    showDetail: {
      type: Boolean,
      default: false
    }
  },
  data() {
    return {
    };
  },
  computed: {
    iconName() {
      return this.showDetail ? 'icon-016' : 'icon-015';
    },
    discountInfo() {
      if (this.discountAmount) {
        return {
          name: '限时优惠',
          value: this.discountAmount
        };
      } else if (this.superSubsidyAmount) {
        return {
          name: '超值补贴',
          value: this.superSubsidyAmount
        };
      } else if (this.couponAmount) {
        return {
          name: '优惠券',
          value: this.couponAmount
        };
      }

      return null;
    }
  },
  created() {},
  methods: {
    handleShowDetails() {
      this.$emit('show-details');
    }
  }
};
</script>

<style lang="scss" scoped>
  .p-charge-details{
    padding: var(--padding);
    display: flex;
    align-items: center;
    justify-content: space-between;
    .discount-info{
      display: flex;
      align-items: center;

      .discount{
        display: flex;
        align-items: center;
        font-weight: 600;
        .icon{
          width: 46px;
          height: 46px;
          margin-right: 4px;
        }
      }

      .tag{
        position: relative;
        padding: 0 6px;
        font-size: 24px;
        background: #FDE7DA;
        color: #E96431;
        border: 1px solid #E96431;
        border-radius: 6px;
        margin-left: 14px;

        &:before{
          content: '';
          position: absolute;
          width: 10px;
          height: 10px;
          background: #FDE7DA;
          border-radius: 2px;
          top: 50%;
          left: -7px;
          transform: translateY(-50%) rotate(-45deg);
          border: 1px solid #E96431;
          border-right: none;
          border-bottom: none;
        }
      }
    }

    .btn-details{
      display: flex;
      align-items: center;
      color: #E96431;
    }
  }
</style>
